<!--
 * @Author: huangyq
 * @Date: 2022-04-21 16:04:42
 * @LastEditTime: 2022-06-14 13:50:24
 * @LastEditors: huangyq
 * @Description: 菜单
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/components/qt3-sidebar/MenuItem.vue
-->
<template>
  <el-menu-item :index="index" @click="handleRoute">
    <i :class="['iconfont', props.menu.meta?.icon]"></i>
    <span>{{ props.menu.meta?.title }}</span>
  </el-menu-item>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { RouteRecordRaw, useRouter } from 'vue-router'
interface IProps {
  menu: RouteRecordRaw
}
const props = withDefaults(defineProps<IProps>(), {})
const index = computed(() => {
  return props.menu.name as string
})

const router = useRouter()
function handleRoute() {
  router.push({ name: props.menu.name })
}
</script>

<style scoped lang="scss">
.iconfont {
  margin-right: 5px;
}
</style>
